<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>换行</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			/*百度图标*/
			@font-face {font-family: "iconfont";
			  src: url('iconfont.eot?t=1602741521667'); /* IE9 */
			  src: url('iconfont.eot?t=1602741521667#iefix') format('embedded-opentype'), /* IE6-IE8 */
			  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAO0AAsAAAAAB6wAAANoAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCfAqDGIJ8ATYCJAMMCwgABCAFhG0HPxvBBhHVm4XIviqwm8nvqGoWruZEvsQIMdCvq6g51T15HmSgLj1ZetcBAtyK9GmAyCkAboA8ds1vblb1y6gIxZKcB//Ld6QbwoXwIwBgA055nyHTZdCVT4AAmGYwGZrzx72qGRvoY9ajYFzm2BoMYDjnuYCNudqCFLgVK5D2MTbE7mc/EADyMOaIREYnZkIAgzGMACCNdTVlEFJ6sJpSAgEEfMlcRkgPJBC4g9xdKHT7v0/+YEgAOEgojLGp1VGVCP2uLZNRZKDQRUEwnhUAtwigABwBDCCZpfZk0DDuiEJeiTOYw7psBBhL5PJX+48HcADhYRQrAgBsiYw7IYHNAg4qZKPo7AX3peQxuQfAaV2p6f9FBk5NzZlZKlZ0nFmd3DGxclp6VpzaOb12rizzMSUdi6MjmpkT5+WVs1Q6sGPFWlkqilPa2c+z5aVLY2Nk55qVQr1FS2/QGmvU1JzVtDF7WOdJzoud2c+fAyLNfPoU2ZH17FnHjpxlm6zBRR2d4fHycuuLFzklk54+TazVcBr5bPN51NnWeNSvGjG6SjSCRj/lKME23+3TqNG1KMP154IS373cbqSvVMC72WsGH9fTPOk45+yyrh50tyWpJN+Jkde6WFqjdeiRXaiOcVD2UP4OYnFeG/BZGLl1QVQzCDWMGDAM9zIrKkP1Iwz7LQ7xVFbqh2Y5oiQC/ZUVoQZkDRu9sTvS/mXVETvpue3cqshtN5HV1e1UJ67Gk0QRpQBkl4X+ow6To1to0B87DmO0sqlEJfC/oMAAAG/Kq/m89hSGAgjgAE7wf1oxJjsYLzJilAGoUbK2CVBkYuAoB0DedAMydKt731+ppRYDBAK0YuCwAUZAIcASzfCOIIECPIGHgBCQh4OYxQrQ0A4KwuQA2NsLQKDqGHBQxjWgUHUPzfDvQAJt/4CHahTkkU001lTAYekWoxZ0YP6QLK3eMsktKL1jOKrmpMinvpH3FIK+6bKpGVfkMSbsnzCIePBMC0xwGNZKsDFltNJEkW1sW1/2RY2lRd0QoxZ0wPxBsrR6t7Hccj9/x3BUzTU1FfY38p7aB71G1wI9y9dWNdfyyP4JAxEPPNMCJrBiNeMEtvJeGa00Yo/oNmqxnm8rb+ZXLs+3CUAexhmUcIQSBmro+B42YqE1nEbNsU4p') format('woff2'),
			  url('iconfont.woff?t=1602741521667') format('woff'),
			  url('iconfont.ttf?t=1602741521667') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
			  url('iconfont.svg?t=1602741521667#iconfont') format('svg'); /* iOS 4.1- */
			}
			.iconfont {
			  font-family: "iconfont" !important;
			  font-size: 16px;
			  font-style: normal;
			  -webkit-font-smoothing: antialiased;
			  -moz-osx-font-smoothing: grayscale;
			}
			/*ul{
				overflow: hidden;
			}*/
			
			li{
				/*列表水平显示*/
				float: left;
				/*子绝父相:before和after的横线*/
				position: relative;
				
				width: 150px;
				height: 100px;
				list-style: none;
				
			}
			span{
				position: absolute;
				left: 30px;
				top: 30px;
				display: block;
				background-color: pink;
			}
			a{
				position: absolute;
				left: 30px;
				top: 100px;
				display: block;
				background-color: deeppink;
			}
			
			li:after{
				position: absolute;
				top: 10px;
				left: 30px;
				width: 100px;
				height: 2px;
				background-color: red;
				content: "";
			}
			li:before{
				position: absolute;
				top: 30px;
				left: 10px;
				width: 2px;
				height: 100px;
				background-color: green;
				content: "";
			}

		</style>
	</head>
	<body>
		<ul>
			<li>
				<span>换行测试</span>
				<a href="#">百度一下</a>
			</li>
			<li>
				<span>换行测试2</span>
				<a href="#">百度一下2</a>
			</li>
		</ul>
		<!--<hr />
		<br />
		<ul>
				<li><span class="font iconfont">&#xf0179;</span>
					<br /><a href="#">小米秒杀</a></li>
				<li><span class="font iconfont">&#xf0179;</span>
					<br /><a href="#">小米秒杀</a></li>
				<li><span class="font iconfont">&#xf0179;</span>
					<br /><a href="#">小米秒杀</a></li>
				<li><span class="font iconfont">&#xf0179;</span>
					<br /><a href="#">小米秒杀</a></li>
				<li><span class="font iconfont">&#xf0179;</span>
					<br /><a href="#">小米秒杀</a></li>
				<li><span class="font iconfont">&#xf0179;</span>
					<br /><a href="#">小米秒杀</a></li>
			</ul>-->
	</body>
</html>
